import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:ladder_cash/app/app.dart';
import 'package:ladder_cash/app/com/http/http_request.dart';
import 'package:ladder_cash/app/com/plugin/device_data_plugin.dart';
import 'package:ladder_cash/app/com/view/base_column.dart';
import 'package:ladder_cash/app/key_mix.dart';
import 'package:ladder_cash/app/page/component/common.dart';
import 'package:ladder_cash/app/page/component/decoration_bg.dart';
import 'package:ladder_cash/config/super_theme.dart';
import 'package:ladder_cash/generated/l10n.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:liuxlcommon/util/re_click.dart';
import 'package:liuxlcommon/view/my_box.dart';
import 'package:liuxlcommon/view/my_style.dart';
import 'package:ladder_cash/app/com/view/login_input_weiget.dart';
import 'package:ladder_cash/app/com/view/webview/my_web/my_web_page.dart';
import 'package:ladder_cash/generated/assets.dart' as myAssets;
import 'package:ladder_cash/value/app_colors.dart';
import 'package:ladder_cash/value/app_const.dart';
import 'package:ladder_cash/value/app_lstyle.dart';
import '../../../Global.dart';
import '../../../gen/assets.gen.dart';
import '../../../library/src/logger.dart';
import '../component/liner_text.dart';
import 'login_logic.dart';
import 'package:liuxlcommon/view/lxl_widget.dart';
import 'package:liuxlcommon/lget/LState.dart';

class LoginPage extends StatefulWidget {
  LoginPage({super.key});

  @override
  createState() => _LoginPage();
}

class _LoginPage extends LState<LoginPage> {
  final logic = Get.put(LoginLogic());

  @override
  get init {}

  // get body=>Stack(children: [Text("datasdfasdfa")],);
  @override
  get body => GetBuilder<LoginLogic>(
      builder: (l) => Scaffold(
          resizeToAvoidBottomInset: true,
          body: Stack(
            children: [
              Container(
                width: Global.width,
                height: Global.height,
                decoration: BoxDecoration(
                    image: getDecorationBg(Assets.login.loginBg.path)),
              ),
              Positioned(
                  top: 190.w,
                  width: Global.width,
                  bottom: 0,
                  child: Container(
                    padding: EdgeInsets.symmetric(vertical: 25.w),
                    decoration:  BoxDecoration(
                      color: SuperTheme.whiteBg,
                      borderRadius: getTopRadius(radius: 20),
                    ),
                    child: LFlexV([
                      Column(
                        children: [
                          Container(
                            margin: EdgeInsets.symmetric(horizontal: 12.w),
                            width: Global.width,
                            decoration:  BoxDecoration(
                              color: SuperTheme.whiteInput,
                              borderRadius: BorderRadius.all(
                                Radius.circular(8),
                              ),
                            ),
                            child: phoneBox,
                          ),
                          LSizeH(15.w),
                          Container(
                            margin: EdgeInsets.symmetric(horizontal: 12.w),
                            padding: EdgeInsets.only(left: 8.w,top: 8.w,right: 8.w,bottom: 8.w),
                            decoration: const BoxDecoration(
                              color: SuperTheme.whiteInput,
                              borderRadius: BorderRadius.all(
                                Radius.circular(8),
                              ),
                            ),
                            child: codeBox,
                          ),
                          LSizeH(23.w),
                          vozBox,
                        ],
                      ),
                      Expanded(
                          child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          LSizeH(28.w),
                          xyBox,
                          LSizeH(21.h),
                          btnBox,
                          LSizeH(21.h),
                        ],
                      )),
                    ]).onTapDown((da) => {OldLInput.unfocus()}),
                  )),
              if (logic.isBack)
                Positioned(top: 0, width: Global.width, child: backBtn),
            ],
          )));
  Widget get btnBox => GetBuilder<LoginLogic>(
      id: 'logbtn',
      builder: (l) => Container(
            height: 43.w,
            padding: EdgeInsets.symmetric(horizontal: 16.sp),
            child: commonBtn(S.current.login, callback: () {
              logic.login();
            }),
          ));

  Widget get phoneBox => LoginInputWeiget(
        logic.phone,
        height: 40.w,
        hintText: S.current.enterCell,
        onChange: (text) {
          logic.phone = text;
          logic.update(['logbtn']);
        },
        type: LInputType.INT,
        leftText: App.area_code ,
        maxLength: 20,
        radius: 10.w,
      );

  Widget get codeBox => Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          LInput(
            logic.code,
            focusNode: logic.codeFocusNode,
            lStyle: LStyle(
                maxLength: 6,
                alignment: Alignment.centerLeft,
                flex: 1,
                fontSize: 12.sp,
                hintColor: SuperTheme.grey9F,
                hintText: S.current.enterVerification),
            onChanged: (text) {
              logic.code = text;
              logic.update(['logbtn']);
            },
            lInputType: LInputType.INT,
          ),
          Obx(() => logic.codeCount.value == 60
              ? LText(
                  S.current.getCode,
                  lStyle: codeCountStyle,
                  onTap: () => logic.getCode(),
                )
              : LText("${logic.codeCount.value}s", lStyle: codeCountStyle)),
        ],
      );

  Widget get vozBox => Container(
        width: 71.w,
        height: 26.w,
        child: myBtn('voz', fontSize: 15.sp, callback: () {
          logic.codeFocusNode.requestFocus();
          logic.getVoiceMessage();
        },
            widget: Image.asset(
              Assets.login.voice.path,
              width: 16.sp,
              height: 16.sp,
              fit: BoxFit.fill,
            )),
      );

  get backBtn => LContainer(
      onTap: () => Get.back(),
      lStyle: LStyle(
          height: 190.w,
          color: Colors.red,
          padding: EdgeInsets.only(top: 50.w, left: 25.w,right: 25.w,bottom: 20.w)),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              LImage.easy(Assets.login.arrowRight.path, 16.w, 9.w),
              getLinerText(S.current.signIn,
                  endColor: SuperTheme.secondPrimary),
              SizedBox(width: 16.w),
            ],
          ),
          textBorder(S.current.welcomeTo,
              borderColor: Colors.white, fontsize: 24.sp,fontWeight: FontWeight.w700)
        ],
      ));

  Widget get xyBox => [
        LRow(
          lStyle: LStyle(
              width: double.infinity,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center),
          children: [
            LImage(
              logic.agree ? Assets.login.checked.path : Assets.login.check.path,
              lStyle: LStyle(
                  height: 15.w, margin: EdgeInsets.symmetric(horizontal: 2.w)),
              onTap: () {
                logic.agree = !logic.agree;
                logic.update();
              },
            ),
            LSizeBoxWidth(2.w),
            LText.easy(
                S.current.iHave, 14.sp, FontWeight.w500, SuperTheme.grey9F),
            LSizeBoxWidth(2.w),
            InkWell(
                child: Text(S.current.privacyAgreement,
                    style: TextStyle(
                        decoration: TextDecoration.underline,
                        decorationColor: SuperTheme.textPrimary,
                        color: SuperTheme.textPrimary,
                        fontSize: 14.sp)),
                //, decoration: TextDecoration.underline
                onTap: () async {
                  if (!clickable()) return;
                  HttpRequest.requestDefaultParamsModel =
                      await DeviceDataPlugin.getRequestDefaultParams;
                  // Get.to(MyWebPage(url: "${HttpRequest.host}/except"));
                  Get.to(MyWebPage(
                      url:
                      App.privacy));
                })
          ],
        ),
      ].column;

  var opeBtnStyle = LStyle(fontSize: 14.sp, fontWeight: FontWeight.w400);

  get codeCountStyle => LStyle(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      textAlign: TextAlign.center,
      css: '''
        font-weight: 400;
        font-size: 12px;
        color: #000;
        width:110px;
        height: 37px;
        background: #B1F526;
        border-radius: 15px 15px 15px 15px;
     ''',
      alignment: Alignment.center);

  get codeCountStyle1 => LStyle(
      // backgroundColor: const Color(0xFFCFCFCF),
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      textAlign: TextAlign.center,
      css: '''
        font-weight: 400;
        font-size: 13px;
        color: #FFFFFF;
        width:110px;
        height: 40px;
        background: #FA9A09;
        border-radius: 5px 5px 5px 5px;
     ''',
      alignment: Alignment.center);

  @override
  void dispose() {
    Get.delete<LoginLogic>();
    super.dispose();
  }

  @override
  // TODO: implement finish
  get finish {}
}
